import React, { Component } from 'react'
import '../asserts/css/uncenter.css'
import {getBanner} from '../request/register'
import { Carousel } from 'antd';
import 'antd/lib/carousel/style/index.css'
import {connect} from 'react-redux'
import {asyncInitAction} from '../redux/coupon/couponAciton'
import {getCouponCount} from '../redux/coupon/selector'

class uncenter extends Component {
    state = {
        nickname: "",
        banner_list: []
    }
    logout() {
        //清除登录凭证
        localStorage.removeItem("loginData")
        //跳转到登录
        this.props.history.push("/login")
    }
    UNSAFE_componentWillMount() {
        const userinfo = JSON.parse(localStorage.getItem("loginData") || '{}')
        this.setState({ nickname: userinfo.nickname })

        //获取轮播图数据
        getBanner().then(res=>{
            if(res.code === 200){
                this.setState({banner_list: res.list})
            }
        })
        //初始化redux数据
        this.props.initAction(userinfo.uid)
    }
    render() {
        const {nickname,banner_list} = this.state
        return (
            <>
                <div className="page-title">会员中心</div>
                <div className="container">
                    <div className="top">
                        <div className="header">
                            <div className="avatar">
                                <img src="./assets/imgs/pic/04.png" alt="" />
                            </div>
                            <div className="info">
                                <h3>{nickname}</h3>
                            </div>
                            <div className="tag">每日签到</div>
                        </div>
                        <ul className="info-list">
                            <li>
                                <h3>12</h3>
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <h3>12</h3>
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <h3>&yen;12</h3>
                                <p>我的红包</p>
                            </li>
                            <li>
                                <h3>{this.props.couponCount}</h3>
                                <p><a href="/coupon" style={{color: "white"}}>优惠券</a></p>
                            </li>
                        </ul>
                        <div className="order-info">
                            <div className="title">
                                <h3>我的订单</h3>
                                <span>全部订单 &gt; </span>
                            </div>
                            <ul>
                                <li>
                                    <img src="./assets/imgs/icon/payment.png" alt="" />
                                    <p>待付款</p>
                                </li>
                                <li>
                                    <img src="./assets/imgs/icon/delivery.png" alt="" />
                                    <p>待收货</p>

                                </li>
                                <li>
                                    <img src="./assets/imgs/icon/evaluation.png" alt="" />
                                    <p>评价</p>

                                </li>
                                <li>
                                    <img src="./assets/imgs/icon/service.png" alt="" />
                                    <p>售后/退款</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div className="banner">
                        <Carousel autoplay>
                            {
                                banner_list.map(item=>{
                                    return <img key={item.id} src={this.$static_url+item.img} alt="" />
                                })
                            }
                        </Carousel>
                    </div>

                    <ul className="section">
                        <li>地址管理</li>
                        <li>我的钱包</li>
                        <li>我的二维码</li>
                        <li>我的小伙伴</li>
                        <li>0元试用</li>
                        <li onClick={this.logout.bind(this)}>退出</li>

                    </ul>
                </div>
            </>
        )
    }
}

const mapState = state=>{
    return {
        couponList: state.coupon,
        couponCount: getCouponCount(state.coupon)
    }
}
const mapDispath = dispatch=>{
    return {
        initAction: (id)=>dispatch(asyncInitAction(id))
    }
}
export default connect(mapState,mapDispath)(uncenter)